/**
 * 配置生产环境常用的配置: 让生产代码、更稳、性能更好、更安全
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 *
 *    压缩css
 *    1.下载依赖  npm i optimize-css-assets-webpack-plugin -D
 *    2.导入插件 const OptimiseCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
 *    3.配置 plugins: [new OptimiseCssAssetsWebpackPlugin()]
 *
 */


const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {resolve} = require('path');
const OptimiseCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// process.env.NODE_ENV = 'development'
// 将 css提取到单独文件/处理css兼容性问题 抽取为一个公共变量, 供css/less/scss复用
const commonCssLoader = [
  {
    // 'style-loader', // 创建style标签, 将样式放入
    // 这个loader取代style-loader.  作用: 提取js中的css成单独文件, 所以style-loader就不需要了
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  },
  'css-loader', // 将css文件整合到js文件中
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      // 配置css
      {
        test: /\.(css)$/,
        use: [...commonCssLoader],
        // Tips: 样式并没有输出到一个单独的css文件中, 而是输出到js/built.js中, 以字符串的形式存在的
        // Tips: 由于使用了 MiniCssExtractPlugin.loader 将css单独生成文件了, 可以在使用插件传入参数, 设置路径和文件名
        // options: {
        //   outputPath: 'css'
        // }
      },
      // 配置less
      {
        test: /\.(less)$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      // 配置图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1000,
          name: '[hash:8].[ext]',
          // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
          esModule: false,
          // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
          outputPath: 'img'
        }
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        options: {
          name: '[hash:8].[ext]',
        }
      },
      // 配置其他资源, 如字体
      {
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({
    template: "./src/index.html"
  }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/app.css'
    }),
    // 压缩css
    new OptimiseCssAssetsWebpackPlugin()
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true
  }
}
